<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{
	   margin:0;
	   padding:0;
	}
	#biao{
		width: 800px;
		height: 800px;
		background: #cccccc;
		border-radius: 400px;
		margin: 10px auto;
	}
	#shi{
		position: relative;
		width: 800px;
		height: 800px;

	}
	#shi div{
		position: absolute;
		text-align: center;
		font-size: 80px;
		left: 370px;
		top: 350px;
		
	}
	#fen{
		position: absolute;
		left: 0;
		top: 0;
		width: 800px;
		height: 800px;
	}
	#fen div{
		position: absolute;
		width: 4px;
		height: 4px;
		background-color:purple; 
		left: 624px;
		top:406px;
	}
	#zhen{
		position: absolute;
		width: 800px;
		height: 800px;
		-webkit-transform:rotate(-90deg);
		

	}
	#h{
		width: 250px;
		height: 18px;
		background: red;
		position: absolute;
		left: 50%;
		top:50%;
		margin-right: -125px;
		margin-top: -9px;
		-webkit-transform-origin:left center;
		-webkit-transform:translateX(0%);
	}
	#m{
		position: absolute;
		width: 300px;
		height: 12px;
		background: yellow;
		left: 50%;
		top: 50%;
		margin-left: -1px;
		margin-top: -6px;
		-webkit-transform-origin:left center;
		-webkit-transform:translateX(0%);
	}
	#s{
		position: absolute;
		width: 384px;
		height: 6px;
		background: blue;
		left: 50%;
		top: 50%;
		margin-left: -1px;
		margin-top: -2px;
		-webkit-transform-origin:left center;
		-webkit-transform:translateX(0%);
	}
	#y{
		position: absolute;
		width: 50px;
		height: 50px;
		background: purple;
		left: 50%;
		top: 50%;
		margin-top: -25px;
		margin-left: -25px;
		border-radius: 25px;
	}
	#d{
		/*background: yellow;*/
		margin-left: -16px;
	}
	</style>
</head>
<body>
	<div id="biao">
	    <div id="zhen">
	    	<div id="h"></div>
	    	<div id="m"></div>
	    	<div id="s"></div>
	    	<div id="y"></div>
	    </div>
		<div id="shi">
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
			<div>9</div>
			<div>10</div>
			<div>11</div>
			<div id="d">12</div>
			<div>1</div>
			<div>2</div>
		</div>
		<div id="fen">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>
</body>
</html>
<script>
    var shi = document.getElementById('shi');
    var shiDivs = shi.getElementsByTagName("div");
    var fen = document.getElementById('fen');
    var fenDivs = fen.getElementsByTagName('div');
    // alert(shiDivs.length);

    for (var i = 0; i < shiDivs.length; i++) {

    	shiDivs[i].style.transform = "rotate("+i*30+"deg)translatex(320px)rotate("+(-i*30)+"deg)";
    }
    for (var i = 0; i < fenDivs.length; i++) {
    	fenDivs[i].style.transform="rotate("+i*6+"deg)translatex(390px)";
    }

    var h = document.getElementById("h");
    var m = document.getElementById("m");
    var s = document.getElementById("s");

    function setTime(){

	   var nowDate = new Date ();
	   var hNum = nowDate.getHours();
	   var mNum = nowDate.getMinutes();
	   var sNum = nowDate.getSeconds();

	   hNum %=12;

	   var hDeg = hNum *30 +mNum/60*30;
	   h.style.transform = "translateX(0%) rotate("+hDeg+"deg)";
	   var mDeg = mNum * 6 + sNum * 0.1;
	   m.style.transform = "translateX(0%) rotate("+mDeg+"deg)";
	   var sDeg = sNum * 6;
	   s.style.transform = "translateX(0%) rotate("+sDeg+"deg)";
	}   


setTime();

setInterval(function (){
	setTime();
},1000);



</script>




















































